<template>
  <view class="task">
    <view class="task-search">
      <!-- <u-input v-model="value" :type="type" :border="border" placeholder="请输入"/> -->
      <u-search
        v-model="search.taskName"
        :show-action="false"
        placeholder="搜索"
        clearable
        bg-color="#EDEDEE"
        shape="square"
        @change="taskNameChange"
      /></view>
    <view class="task-view">
      <view class="task-view-top">
        <image :src="imgLogo" class="task-view-top-image" />
        <view class="task-view-top-title">任务列表</view>
      </view>
      <view v-if="taskList.length" class="task-view-content" @touchmove.stop.prevent>
        <Hr-Pull-Load
          ref="hrPullLoad"
          :height="-1"
          :bottom-tips="bottomTips"
          @loadMore="loadMore"
          @refresh="refresh"
        >
          <task-list :task-list="taskList" :xz-role="xzRole" />
        </Hr-Pull-Load>
      </view>
    </view>
    <view v-if="!taskList.length && !loading" class="task-no">
      <u-image :src="taskno" mode="widthFix" />
      <view class="task-no-text">您还没有任何任务</view>
    </view>
    <view class="task-loading">
      <u-mask :show="loading"><u-loading size="100" mode="flower" :show="loading" /></u-mask>
    </view>
  </view>
</template>

<script>
import TaskList from './compontents/TaskList.vue';
import { debounce } from '@/utils/debounce';
import { getTaskTable } from '@/api/task';
export default {
  components: {
    TaskList
  },
  data() {
    return {
      imgLogo: require('@/static/img/task/tasklogo.png'),
      taskno: require('@/static/img/task/taskno.png'),
      taskList: [],
      loading: true,
      timer: null,
      bottomTips: '',
      search: {
        taskName: '',
        pageIndex: 0,
        pageSize: 10
      },
      total: 0,
      xzRole: false,
      userId: undefined
    };
  },
  async created() {
    this.getXzRole();
    this.loading = true;
    await this.getTaskTable();
    this.loading = false;
    this.taskNameChange = debounce(this.taskNameChange, 500);

  },
  methods: {
    getXzRole() {
      const appRole = uni.getStorageSync('appRole');
      this.userId = uni.getStorageSync('userId');
      this.xzRole = appRole && appRole.includes('乡镇');
    },
    async getTaskTable() {
      let url, data;
      if (!this.xzRole) {
        url = '/taskLibrary/listTask';
        data = {
          editUser: this.userId
        };
      } else {
        url = '/taskLibrary/listTaskXz';
        data = {
          participant: this.userId
        };
      }
      await getTaskTable({
        ...data,
        ...this.search
      }, url).then(res => {
        const { success, data, total } = res;
        if (success) {
          if (this.search.pageIndex) {
            this.taskList = this.taskList.concat(data);
          } else {
            this.taskList = data;
          }
          this.total = total;
        } else {
          this.taskList = [];
          this.total = 0;
        }
      });
    },

    // 搜索框
    taskNameChange() {
      this.search.pageIndex = 0;
      this.getTaskTable();
    },

    // 下拉刷新
    async refresh() {
      this.search.pageIndex = 0;
      await this.getTaskTable();
      this.$refs.hrPullLoad.reSet();
    },

    // 上拉加载
    async loadMore() {
      if (((this.search.pageIndex + 1) * this.search.pageSize) >= this.total) {
        this.bottomTips = 'nomore';
      } else {
        this.bottomTips = 'loading';
        this.search.pageIndex++;
        await this.getTaskTable();
        this.bottomTips = '';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.task{
  .task-search{
    padding: 8px 16px 8px 16px;
  }
  .task-view {
    padding-top: 10px;
    .task-view-content{
      height: calc(100vh - 100px);
    }
    .task-view-top{
      display: flex;
      height: 50px;
      align-items: center;
      .task-view-top-image{
        width: 20px;
        height: 20px;
        padding: 0 10px;
      }
      .task-view-top-title{
        font-size: 17px;
        font-weight: 600;
        color: #303133;
      }
    }

  }
  .u-loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
  }
  .task-no{
    .task-no-text{
      text-align: center;
      color: #b6b9bf;
      font-weight: 550;
      font-size: 17px;
      padding-top: 16px;
    }
  }
}
</style>
